<template>
  <el-dialog
    v-model="showVisible"
    :title="typeName + '图书'"
    width="800px"
    destroy-on-close
    center
  >
    <el-form
      status-icon
      inline
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100"
      label-position="right"
    >
      <el-form-item class="w-42s" prop="book_name" label="图书名称">
        <el-input
          type="text"
          v-model="formData.book_name"
          placeholder="图书名称"
        />
      </el-form-item>
      <el-form-item class="w-42s" prop="author" label="作者">
        <el-input type="text" v-model="formData.author" placeholder="作者" />
      </el-form-item>
      <el-form-item class="w-42s" prop="postion" label="书架号">
        <el-input type="text" v-model="formData.postion" placeholder="书架号" />
      </el-form-item>
      <el-form-item class="w-42s" prop="category_id" label="图书分类">
        <el-select v-model="formData.category_id">
          <el-option
            v-for="category in categoryList"
            :key="category.id"
            :label="category.category_name"
            :value="category.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="w-42s" prop="publisher" label="出版社">
        <el-input
          type="text"
          v-model="formData.publisher"
          placeholder="出版社"
        />
      </el-form-item>
      <el-form-item class="w-42s" prop="publish_date" label="出版日期">
        <el-date-picker
          v-model="formData.publish_date"
          type="datetime"
          format="YYYY-MM-DD hh:mm:ss"
          value-format="YYYY-MM-DD hh:mm:ss"
          placeholder="出版日期"
        />
      </el-form-item>
      <el-form-item class="w-42s" prop="ISBN" label="国际标准书号">
        <el-input
          type="text"
          v-model="formData.ISBN"
          placeholder="国际标准书号"
        />
      </el-form-item>
      <el-form-item class="w-42s" prop="status" label="借阅状态">
        <el-radio-group v-model="formData.status">
          <el-radio :label="0"> 可借 </el-radio>
          <el-radio :label="1"> 不可借 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="avatar" label="图书封面">
        <tf-upload
          :url="formData.cover"
          @on-success="(val) => (formData.cover = val)"
        />
      </el-form-item>
      <el-form-item style="width: 96%" prop="describe" label="图书简介">
        <el-input
          :rows="6"
          type="textarea"
          v-model="formData.describe"
          placeholder="图书简介"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFun">
          {{ typeName }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs, nextTick, getCurrentInstance } from "vue";
import { addBookApi, updateBookApi } from "@/api/books";
import { getCategoryListApi } from "@/api/category";
// import type { FormInstance } from 'element-plus';
// const { proxy } = getCurrentInstance() as any;
const emit = defineEmits(["on-reset"]);
const DEFAULT_FORM = {
  book_name: "",
  author: "",
  cover: "",
  postion: "",
  category_id: "",
  publisher: "",
  publish_date: "",
  ISBN: "",
  status: 0,
  describe: "",
};
const id = ref("");
const formRef = ref();
const formData = ref<any>({ ...DEFAULT_FORM });
const showVisible = ref<boolean>(false);
const actionState = reactive<any>({
  type: 1, // 1 添加 2 修改
  typeName: "添加",
});
const categoryList = ref<any[]>([]);
const formRules = reactive({
  book_name: [{ required: true, message: "请填写图书名称", trigger: "blur" }],
  author: [{ required: true, message: "请填写图书作者", trigger: "blur" }],
  postion: [
    { required: true, message: "请填写图书架号", trigger: "blur" },
    { min: 2, max: 8, message: "用户名3-8个字符", trigger: "blur" },
  ],
  category_id: [
    { required: true, message: "请选择图书类型", trigger: "change" },
  ],
  status: [{ required: true, message: "请选择借阅状态", trigger: "blur" }],
});
const { type, typeName } = toRefs(actionState);
const getCategoryList = (): void => {
  getCategoryListApi().then((_res: any) => {
    categoryList.value = _res;
  });
};
// 显示编辑用户框
const showForm = (data?: any): void => {
  type.value = 1;
  typeName.value = "添加";
  formData.value = { ...DEFAULT_FORM };
  if (data) {
    id.value = data.id;
    type.value = 2;
    typeName.value = "编辑";
    Object.keys(data).forEach((key: string) => {
      formData.value[key] = data[key];
    });
  }
  getCategoryList();
  showVisible.value = true;
};
// 提交保存
const submitFun = async (): Promise<any> => {
  await formRef.value.validate((val: boolean) => {
    if (val) {
      if (type.value === 1) {
        addBookApi(formData.value).then((_res: any) => {
          showVisible.value = false;
          emit("on-reset");
        });
      } else {
        updateBookApi(id.value, formData.value).then((_res: any) => {
          showVisible.value = false;
          emit("on-reset");
        });
      }
    } else {
      return false;
    }
  });
};
defineExpose({
  showForm,
});
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;

  .el-button {
    margin: 0 20px;
    width: 120px;
  }
}

.w-42s {
  width: 42%;
}
</style>
